<template>
  <div class="main-pop">
    <div class="top-btns">
      <a-button type="primary" @click="save()">
        <a-icon type="save" />保存
      </a-button>
      <a-button type="primary" @click="goback()">
        <a-icon type="rollback" />返回
      </a-button>
    </div>
    <a-form :form="form" class="form-wrap basic-form-pop">
      <a-form-item label="*服务商姓名：">
        <a-input v-model.trim="params.partner_name" placeholder="请输入服务商姓名" />
      </a-form-item>
      <a-form-item label="*服务商手机号：">
        <a-input v-model.trim="params.phone" placeholder="请输入服务商手机号" />
      </a-form-item>
      <a-form-item label="*服务商身份证号：">
        <a-input v-model.trim="params.identity" placeholder="请选择服务商身份证号" />
      </a-form-item>
      <a-form-item label="*所在地区：">
         <area-select
          :createPlace="params.basic_area"
          @handlePlace="selectArea"
          :allowClear="false"
        />
      </a-form-item>
      <a-form-item label="*分润状态：">
        <a-select v-model="params.is_commission" placeholder="请选择分润状态">
          <a-select-option :value="1">开启</a-select-option>
          <a-select-option :value="0">关闭</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="账号状态：">
        <a-select v-model="params.is_enable" placeholder="请选择分润状态">
          <a-select-option :value="1">开启</a-select-option>
          <a-select-option :value="0">关闭</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="*推荐人id：">
        <a-input @click="openSPShow()" v-model="params.pid" placeholder="请选择推荐人id">
          <a-icon slot="suffix" type="ellipsis" />
        </a-input>
      </a-form-item>
      <a-form-item label="推荐人姓名：">
        <a-input v-model="params.pid_name" placeholder="请选择推荐人姓名" disabled />
      </a-form-item>
      <a-form-item label="*推荐人手机号：">
        <a-input v-model="params.pid_phone" placeholder="请选择推荐人手机号" disabled />
      </a-form-item>
      <div v-if="isLicense">
        <a-form-item label="*营业执照名称：">
          <a-input v-model.trim="license_name" placeholder="请选择营业执照名称" />
        </a-form-item>
        <a-form-item label="*营业执照：">
          <a-upload
            name="license"
            listType="picture-card"
            class="uploader"
            :showUploadList="false"
            :customRequest="handleChangeLicenseImg"
          >
            <img class="min-pic" v-if="license" :src="license" alt />
            <div v-else>
              <a-icon type="plus" />
              <div class="ant-upload-text">上传图片</div>
            </div>
          </a-upload>
        </a-form-item>
      </div>
    </a-form>
    <div class="modal-wrap">
      <!-- 选择服务商 -->
      <a-modal
        v-model="SPShow"
        class="wide-modal"
        title="选择服务商"
        @ok="ChoiceSP()"
        @cancel="cancelSP"
      >
        <a-row>
          <a-col :lg="14" :xl="8" :xxl="12">
            <a-input v-model.trim="SPName" placeholder="请输入服务商账号、名称或联系方式"></a-input>
          </a-col>
          <a-col :lg="6" :xl="8" :xxl="4" class="search">
            <a-button type="primary" @click="getPartner()">查询</a-button>
          </a-col>
          <a-table
            :columns="SPList"
            :rowKey="record => record.account"
            :dataSource="SPData"
            :loading="SPLoading"
            :pagination="false"
            :rowSelection="rowSelection"
          >
            <template slot="name" slot-scope="name">{{name.first}} {{name.last}}</template>
          </a-table>
        </a-row>
      </a-modal>
      <a-modal v-model="backVisible" title="返回确认" :footer="null" class="back-pop">
        <p>页面未保存，是否离开该页面！</p>
        <div class="back-btn-wrap">
          <a-button type="primary" @click="closeBack">取消</a-button>
          <a-button type="primary" @click="handleConfirmOk">离开并保存</a-button>
          <a-button type="primary" @click="backDeatil">离开</a-button>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
import {
  uploadImg,
  getPartner,
  bodyUpdate
} from '../../../store/providerApi.js'
let paramsData
let sendsData
let sends
let temporaryData = null
const rowSelection = {
  type: 'radio',
  onChange(selectedRowKeys, selectedRows) {
    temporaryData = { ...selectedRows[0] }
  }
}
export default {
  name: 'subjectEdit',
  props: {
    detailData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      backVisible: false,
      SPShow: false,
      SPLoading: false,
      SPName: '',
      temporaryData,
      rowSelection,
      form: this.$form.createForm(this),
      SPList: [
        {
          title: 'id',
          dataIndex: 'id'
        },
        {
          title: '服务商账号',
          dataIndex: 'account'
        },
        {
          title: '服务商名称',
          dataIndex: 'name'
        },
        {
          title: '手机号码',
          dataIndex: 'phone'
        },
        {
          title: '所在区域',
          dataIndex: 'address'
        }
      ],
      SPData: [],
      params: {
        id: this.$route.query.id,
        type: this.detailData.type,
        partner_name: this.detailData.partner_name,
        phone: this.detailData.phone,
        identity: this.detailData.identity,
        basic_area: [
          this.detailData.province_id,
          this.detailData.city_id,
          this.detailData.district_id
        ],
        province_id: this.detailData.province_id,
        city_id: this.detailData.city_id,
        district_id: this.detailData.district_id,
        is_commission: this.detailData.is_commission ? 1 : 0,
        is_enable: this.detailData.is_enable ? 1 : 0,
        pid: this.detailData.pid,
        pid_name: this.detailData.pid_name,
        pid_phone: this.detailData.pid_phone
      },
      license_name: this.detailData.license_name,
      license: this.detailData.license
    }
  },
  computed: {
    isLicense() {
      if (this.detailData.type === 1) {
        return false
      } else if (this.detailData.type === 2) {
        return true
      }
    }
  },
  mounted() {
    paramsData = JSON.stringify(this.params)
    // console.log(paramsData)
  },
  methods: {
    // 省市区
    selectArea({ area, provinceId, cityId, districtId }) {
      this.params.basic_area = area
      this.params.province_id = provinceId
      this.params.city_id = cityId
      this.params.district_id = districtId
    },
    handleChangeLicenseImg({ file }) {
      let formData = new FormData()
      formData.append('image', file)
      uploadImg(formData).then(res => {
        this.license = res.data.url
      })
    },
    // 获取服务商
    getPartner() {
      let params = {
        page: 1,
        num: 10,
        name: this.SPName
      }
      this.SPLoading = true
      getPartner(params).then(res => {
        if (!res.error) {
          this.SPLoading = false
          this.SPData = res.data.list
        }
      })
    },
    // 打开服务商弹窗
    openSPShow() {
      this.SPShow = true
      this.nameDisabled = true
      this.getPartner()
    },
    // 确定服务商
    ChoiceSP() {
      this.params.pid_name = temporaryData.name
      this.params.pid_phone = temporaryData.phone
      this.params.pid = temporaryData.id
      this.nameDisabled = false
      this.SPShow = false
    },
    // 取消（服务商弹窗）
    cancelSP() {
      this.nameDisabled = false
      this.SPShow = false
    },
    saveMsg() {
      sends = {
        id: this.$route.query.id,
        type: this.detailData.type,
        partner_name: this.params.partner_name,
        phone: this.params.phone,
        identity: this.params.identity,
        basic_area: this.params.basic_area,
        province_id: this.params.province_id,
        city_id: this.params.city_id,
        district_id: this.params.district_id,
        is_commission: this.params.is_commission ? 1 : 0,
        is_enable: this.params.is_enable ? 1 : 0,
        pid: this.params.pid,
        pid_name: this.params.pid_name,
        pid_phone: this.params.pid_phone
      }
      sendsData = JSON.stringify(sends)
    },
    save() {
      this.saveMsg()
      var isEmpty = false
      Object.keys(sends).forEach(function(key) {
        if (sends[key] === '') {
          isEmpty = true
        }
      })
      if (isEmpty) {
        this.$message.info('信息填写不完整,无法保存!')
      } else {
        if (this.detailData.type === 2) {
          if (
            sendsData == paramsData &&
            this.license_name &&
            this.license_name === this.detailData.license_name &&
            this.license &&
            this.license === this.detailData.license
          ) {
            this.$message.info('修改成功!')
            this.$emit('closePop')
          } else {
            sends.license = this.license
            sends.license_name = this.license_name
            bodyUpdate(sends).then(res => {
              this.$message.success(res.data.message)
              this.$emit('savePop')
            })
          }
        } else if (this.detailData.type === 1) {
          if (paramsData == sendsData) {
            this.$message.info('修改成功!')
            this.$emit('closePop')
          } else {
            bodyUpdate(sends).then(res => {
              this.$message.success(res.data.message)
              this.$emit('savePop')
            })
          }
        }
      }
    },
    goback() {
      if (this.detailData.type === 2) {
        this.saveMsg()
        if (
          sendsData == paramsData &&
          this.license_name === this.detailData.license_name &&
          this.license === this.detailData.license
        ) {
          this.$emit('closePop')
        } else {
          this.backVisible = true
        }
      } else if (this.detailData.type === 1) {
        this.saveMsg()
        if (sendsData == paramsData) {
          this.$emit('closePop')
        } else {
          this.backVisible = true
        }
      }
    },
    closeBack() {
      this.backVisible = false
    },
    handleConfirmOk() {
      this.backVisible = false
      this.save()
    },
    backDeatil() {
      this.backVisible = false
      this.$emit('closePop')
    }
  }
}
</script>

<style lang="scss" scoped>
.uploader {
  display: block;
  width: 70% !important;
}
</style>
